---
image: /generated/articles-docs-preview.png
title: Preview your video
id: preview
crumb: 'Timeline basics'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

You can preview your video by starting the [Remotion Studio](/docs/studio):

<Tabs
defaultValue="Regular templates"
values={[
{ label: 'Regular templates', value: 'Regular templates', },
{ label: 'Next.js and React Router 7 templates', value: 'Next.js and React Router templates', },
]
}>
<TabItem value="Regular templates">

```bash
npm run dev
```

  </TabItem>

  <TabItem value="Next.js and React Router templates">

```bash
npm run remotion
```

  </TabItem>
</Tabs>

This is a shorthand for the [`studio`](/docs/cli/studio) command of the [Remotion CLI](/docs/cli):

```bash
npx remotion studio
```

A server will be started on port `3000` (or a higher port if it isn't available) and the Remotion Studio should open in the browser.

<img src="/img/timeline.png"></img>

Learn more about the [Remotion Studio](/docs/studio).

:::note
In older projects, `npm start` was used over `npm run dev`.
:::
